<template>
    <el-card>
      <div class="flex justify-between items-center">
        <div>
          <div class="text-gray-500">{{ title }}</div>
          <div class="text-2xl font-bold mt-1">{{ value.toLocaleString() }}{{ unit }}</div>
        </div>
        <el-icon size="30">
          <component :is="iconMap[icon]" />
        </el-icon>
      </div>
    </el-card>
  </template>
  
  <script setup>
  import { OfficeBuilding, User, Money } from '@element-plus/icons-vue'

  const props = defineProps({
    title: String,
    value: Number,
    unit: {
      type: String,
      default: ''
    },
    icon: String
  })
  
  const iconMap = {
    'office-building': OfficeBuilding,
    'user': User,
    'money': Money
  }
  </script>
  